<template>
  <div class="basic-setting-content pl16 pr16">
    <!--基础设置-->
    <div class="common-form">基础设置</div>
    <el-form-item
      label="活动名称"
      :rules="[{ required: true, message: '请填写活动名称' }]"
      prop="name"
    >
      <el-input v-model="form.name" class="max-w460"></el-input>
    </el-form-item>
    <el-form-item label="活动背景图" prop="imageId">
      <el-row>
        <el-button type="primary" @click="openUpload('image')"
          >选择图片</el-button
        >
        <div v-if="form.imageId != ''" class="img">
          <img :src="form.filePath" width="100" height="100" />
        </div>
      </el-row>
    </el-form-item>
    <el-form-item label="邀请攻略图" prop="ruleId">
      <el-row>
        <el-button type="primary" @click="openUpload('rule')"
          >选择图片</el-button
        >
        <div v-if="form.ruleId != ''" class="img">
          <img :src="form.ruleFilePath" width="100" height="100" />
        </div>
        <div class="tips">建议尺寸：702px*280px</div>
      </el-row>
    </el-form-item>
    <el-form-item
      label="活动时间"
      :rules="[{ required: true, message: ' ' }]"
      prop="startTime"
    >
      <el-date-picker
        v-model="form.startTime"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="选择开始日期"
      ></el-date-picker>
      <span>-</span>
      <el-date-picker
        v-model="form.endTime"
        type="date"
        value-format="YYYY-MM-DD"
        placeholder="选择结束日期"
      ></el-date-picker>
    </el-form-item>
    <!--活动规则-->
    <div class="common-form">活动规则</div>
    <el-form-item label="活动对象">全部客户</el-form-item>
    <el-form-item label="活动类型">
      <el-radio-group v-model="form.invType" @change="changeInvType">
        <div class="d-c d-s-s">
          <el-radio size="small" :label="1"
            >单次奖励<span class="gray9"
              >例：活动时间内，邀请2人获得奖励</span
            ></el-radio
          >
          <el-radio size="small" :label="2"
            >循环奖励<span class="gray9"
              >例：活动时间内，每邀请2人获得奖励</span
            ></el-radio
          >
          <el-radio size="small" :label="0"
            >阶梯奖励<span class="gray9"
              >例：活动时间内，每邀请2人获得A奖励，邀请5人再得B奖励</span
            ></el-radio
          >
        </div>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="邀请人奖励">
      <el-form-item label="邀请成功的条件">
        <el-radio-group v-model="form.invCondition">
          <el-radio size="small" :label="0">邀请成为会员</el-radio>
          <el-radio size="small" :label="1">邀请成为会员且消费</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        v-for="(item, reward_index) in form.rewardData"
        :key="reward_index"
        class="mt16 reward-box"
      >
        <div>
          <div class="d-b-c" v-if="form.invType == 0">
            <span class="f16 blue">奖项{{ reward_index + 1 }}:</span>
            <span
              class="f16 blue"
              style="cursor: pointer"
              @click="delReward(reward_index)"
              >删除</span
            >
          </div>

          <el-form-item label="邀请人数满"
            ><el-input
              type="number"
              v-model="item.invitationNum"
              size="small"
              style="width: 100px"
              class="mr10"
            ></el-input>
            <span>人</span></el-form-item
          >
          <el-form-item label="活动奖励">
            <el-checkbox
              size="small"
              v-model="item.isCoupon"
              label="赠送优惠券"
              :true-label="1"
              :false-label="0"
            />
            <el-checkbox
              size="small"
              v-model="item.isBalance"
              label="赠送余额"
              :true-label="1"
              :false-label="0"
            />
            <el-checkbox
              size="small"
              v-model="item.isPoint"
              label="赠送积分"
              :true-label="1"
              :false-label="0"
            />
          </el-form-item>
          <div style="width: 100%" class="mb16" v-if="item.isCoupon == true">
            <el-table :data="item.couponList" style="width: 100%" class="ml20">
              <el-table-column prop="couponId" label="优惠券ID">
              </el-table-column>
              <el-table-column prop="name" label="优惠券名称">
              </el-table-column>
              <el-table-column label="赠送张数">
                <template #default="scope">
                  <el-form-item
                    :rules="inputValue"
                    :prop="
                      'rewardData.' +
                      reward_index +
                      '.couponList.' +
                      scope.$index +
                      '.couponNum'
                    "
                  >
                    <el-input
                      type="number"
                      v-model="item.couponList[scope.$index].couponNum"
                    >
                      <template #append>张</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    link
                    @click="delcoupon('rewardData', reward_index, scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button
            v-if="item.isCoupon == true"
            type="primary"
            @click="addCoupon('rewardData', reward_index)"
            class="ml20"
            icon="Plus"
            >添加优惠劵</el-button
          >
          <el-form-item label="赠送余额" v-if="item.isBalance"
            ><el-input
              type="number"
              v-model="item.balance"
              size="small"
              style="width: 100px"
            ></el-input
          ></el-form-item>
          <el-form-item label="赠送积分" v-if="item.isPoint"
            ><el-input
              type="number"
              v-model="item.point"
              size="small"
              style="width: 100px"
            ></el-input
          ></el-form-item>
        </div>
      </div>
      <div style="padding: 10px 20px 20px 40px" v-if="form.invType == 0">
        <el-button type="primary" @click="addInv">添加奖励项</el-button>
      </div>
    </el-form-item>
    <el-form-item label="被邀请人设置">
      <div class="reward-box">
        <div>
          <el-checkbox
            size="small"
            v-model="form.invMember"
            label="被邀请人成为会员是否奖励"
            :true-label="1"
            :false-label="0"
          />
        </div>
        <template v-if="form.invMember">
          <div>
            <el-checkbox
              size="small"
              v-model="form.memberReward.isCoupon"
              label="赠送优惠券"
              :true-label="1"
              :false-label="0"
            />
            <el-checkbox
              size="small"
              v-model="form.memberReward.isBalance"
              label="赠送余额"
              :true-label="1"
              :false-label="0"
            />
            <el-checkbox
              size="small"
              v-model="form.memberReward.isPoint"
              label="赠送积分"
              :true-label="1"
              :false-label="0"
            />
          </div>
          <div
            style="width: 100%"
            class="mb16"
            v-if="form.memberReward.isCoupon == true"
          >
            <el-table
              :data="form.memberReward.couponList"
              style="width: 100%"
              class="ml20"
            >
              <el-table-column prop="couponId" label="优惠券ID">
              </el-table-column>
              <el-table-column prop="name" label="优惠券名称">
              </el-table-column>
              <el-table-column label="赠送张数">
                <template #default="scope">
                  <el-form-item
                    :rules="inputValue"
                    :prop="
                      'memberReward.couponList.' + scope.$index + '.couponNum'
                    "
                  >
                    <el-input
                      type="number"
                      v-model="
                        form.memberReward.couponList[scope.$index].couponNum
                      "
                    >
                      <template #append>张</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    link
                    @click="delcoupon('memberReward', scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button
            v-if="form.memberReward.isCoupon == true"
            type="primary"
            @click="addCoupon('memberReward')"
            class="ml20"
            icon="Plus"
            >添加优惠劵</el-button
          >
          <el-form-item label="赠送余额" v-if="form.memberReward.isBalance"
            ><el-input
              type="number"
              v-model="form.memberReward.balance"
              size="small"
              style="width: 100px"
            ></el-input
          ></el-form-item>
          <el-form-item label="赠送积分" v-if="form.memberReward.isPoint"
            ><el-input
              type="number"
              v-model="form.memberReward.point"
              size="small"
              style="width: 100px"
            ></el-input
          ></el-form-item>
        </template>
        <div>
          <el-checkbox
            size="small"
            v-model="form.invConsumption"
            label="被邀请人成为会员且消费"
            :true-label="1"
            :false-label="0"
          />
        </div>
        <template v-if="form.invConsumption">
          <div>
            <el-checkbox
              size="small"
              v-model="form.consumptionReward.isCoupon"
              label="赠送优惠券"
              :true-label="1"
              :false-label="0"
            />
            <el-checkbox
              size="small"
              v-model="form.consumptionReward.isBalance"
              label="赠送余额"
              :true-label="1"
              :false-label="0"
            />
            <el-checkbox
              size="small"
              v-model="form.consumptionReward.isPoint"
              label="赠送积分"
              :true-label="1"
              :false-label="0"
            />
          </div>
          <div
            style="width: 100%"
            class="mb16"
            v-if="form.consumptionReward.isCoupon == true"
          >
            <el-table
              :data="form.consumptionReward.couponList"
              style="width: 100%"
              class="ml20"
            >
              <el-table-column prop="couponId" label="优惠券ID">
              </el-table-column>
              <el-table-column prop="name" label="优惠券名称">
              </el-table-column>
              <el-table-column label="赠送张数">
                <template #default="scope">
                  <el-form-item
                    :rules="inputValue"
                    :prop="
                      'consumptionReward.couponList.' +
                      scope.$index +
                      '.couponNum'
                    "
                  >
                    <el-input
                      type="number"
                      v-model="
                        form.consumptionReward.couponList[scope.$index]
                          .couponNum
                      "
                    >
                      <template #append>张</template>
                    </el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    link
                    @click="delcoupon('consumptionReward', scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-button
            v-if="form.consumptionReward.isCoupon == true"
            type="primary"
            @click="addCoupon('consumptionReward')"
            class="ml20"
            icon="Plus"
            >添加优惠劵</el-button
          >
          <el-form-item label="赠送余额" v-if="form.consumptionReward.isBalance"
            ><el-input
              type="number"
              v-model="form.consumptionReward.balance"
              size="small"
              style="width: 100px"
            ></el-input
          ></el-form-item>
          <el-form-item label="赠送积分" v-if="form.consumptionReward.isPoint"
            ><el-input
              type="number"
              v-model="form.consumptionReward.point"
              size="small"
              style="width: 100px"
            ></el-input
          ></el-form-item>
        </template>
      </div>
    </el-form-item>
    <div class="common-form">被邀请人页面</div>
    <el-form-item label="被邀请人广告图" prop="invImageId">
      <el-row>
        <el-button type="primary" @click="openUpload('lul')"
          >选择图片</el-button
        >
        <div v-if="form.invImageId != ''" class="img">
          <img :src="form.invImagePath" width="100" height="100" />
        </div>
        <div class="tips">注：无限制,建议上传尺寸750px*1640px</div>
      </el-row>
    </el-form-item>
    <!-- <el-form-item label="规则说明">
      <div class="">
        <WangEditor
          style="width: 100%"
          :content="form.invRule"
          @contens="contentm"
          @editorContent="getEditorContent"
        ></WangEditor>
      </div>
    </el-form-item> -->
    <div class="common-form">分享设置</div>
    <el-form-item
      label="分享标题"
      :rules="[{ required: true, message: '请填写分享标题' }]"
      prop="shareTitle"
    >
      <el-input v-model="form.shareTitle" class="max-w460"></el-input>
    </el-form-item>
    <el-form-item
      label="分享内容"
      prop="shareDesc"
      :rules="[{ required: true, message: ' ' }]"
    >
      <el-input
        type="text"
        v-model="form.shareDesc"
        placeholder="请输入分享内容"
        class="max-w460"
      ></el-input>
    </el-form-item>
    <el-form-item label="分享图" prop="shareImageId">
      <el-row>
        <el-button type="primary" @click="openUpload('share')"
          >选择图片</el-button
        >
        <div v-if="form.shareImageId != ''" class="img">
          <img :src="form.shareFilePath" width="100" height="100" />
        </div>
        <div class="tips">建议尺寸：496px*400px</div>
      </el-row>
    </el-form-item>
    <!--商品图片组件-->
    <Upload v-if="isUpload" :config="config" @returnImgs="returnImgsFunc">
      上传图片</Upload
    >
    <!--选择优惠券-->
    <GetCoupon
      v-if="open_add"
      :open_add="open_add"
      @closeDialog="closeProductDialogFunc($event)"
      >选择优惠券弹出层
    </GetCoupon>
  </div>
</template>

<script>
import Upload from "@/components/file/Upload.vue";
import GetCoupon from "@/components/coupon/GetCoupon.vue";
// import Uediter from "@/components/UE.vue";
import WangEditor from "@/components/wangEditor/index.vue";
export default {
  components: {
    Upload,
    GetCoupon,
    // Uediter,
    WangEditor,
  },
  data() {
    const validateInput = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error("请输入数量"));
      } else {
        const num = Number(value); // 尝试将value转换为数字
        if (Number.isInteger(num) && num >= 1 && num <= 9) {
          callback();
        } else {
          callback(new Error("请输入1-9的整数"));
        }
      }
    };
    return {
      /*富文本框配置*/
      ueditor: {
        text: "",
        config: {
          initialFrameWidth: 400,
          initialFrameHeight: 500,
        },
      },
      config: {
        total: 1,
        fileType: "image",
      },
      isUpload: false,
      type: "image",

      open_add: false,
      coupon_index: 0,
      coupon_type: "",
      /*优惠券*/
      tableData: [],
      inputValue: [
        {
          validator: validateInput,
          trigger: "blur",
        },
      ],
    };
  },
  inject: ["form"],
  created() {
    console.log(this.form);
  },
  methods: {
    contentm(e) {
      this.form.invRule = e;
    },
    getEditorContent(data) {
      console.log(data, "dtat");
      this.content = data;
    },
    changeInvType(e) {
      console.log(e);
      this.form.rewardData = [
        {
          invitationNum: 1,
          isCoupon: false,
          point: 0,
          isPoint: false,
          couponIds: "",
          couponList: [],
          isBalance: false,
          balance: "",
        },
      ];
    },
    /*添加奖励*/
    addInv() {
      let obj = {
        invitationNum: 1,
        isCoupon: false,
        point: 0,
        isPoint: false,
        couponIds: "",
        couponList: [],
        isBalance: false,
        balance: "",
      };
      this.form.rewardData.push(obj);
    },
    delReward(index) {
      this.form.rewardData.splice(index, 1);
    },
    delcoupon(type, index, sindex) {
      if (type == "rewardData") {
        this.form.rewardData[index].couponList.splice(sindex, 1);
      }
      if (type == "memberReward") {
        this.form.memberReward.couponList.splice(index, 1);
      }
      if (type == "consumptionReward") {
        this.form.consumptionReward.couponList.splice(index, 1);
      }
    },
    /*添加优惠券*/
    addCoupon(type, reward_index) {
      this.coupon_index = reward_index;
      this.coupon_type = type;
      this.open_add = true;
    },
    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      const { coupon_index, coupon_type, form } = this;
      this.open_add = e.openDialog;

      const addCoupon = (couponList, couponId, name) => {
        // 检查 couponId 是否已存在
        if (couponList.some((item) => item.couponId === couponId)) {
          ElMessage.error("请勿重复添加");
        } else {
          // 添加新的优惠券
          couponList.push({
            name: name,
            couponId,
            couponNum: 1,
          });
        }
      };

      // 根据 coupon_type 分发处理
      if (coupon_type === "rewardData") {
        if (!form.rewardData[coupon_index].couponList) {
          form.rewardData[coupon_index].couponList = [];
        }
        const couponList = form.rewardData[coupon_index].couponList;
        addCoupon(couponList, e.params.couponId, e.params.name);
      } else if (coupon_type === "memberReward") {
        if (!form.memberReward.couponList) {
          form.memberReward.couponList = [];
        }
        const couponList = form.memberReward.couponList;
        addCoupon(couponList, e.params.couponId, e.params.name);
      } else if (coupon_type === "consumptionReward") {
        if (!form.consumptionReward.couponList) {
          form.consumptionReward.couponList = [];
        }
        const couponList = form.consumptionReward.couponList;
        addCoupon(couponList, e.params.couponId, e.params.name);
      } else {
        console.error("未知的 coupon_type:", coupon_type);
      }
    },
    /*获取图片*/
    returnImgsFunc(e) {
      console.log(this.type);
      if (e != null && e.length > 0) {
        if (this.type == "image") {
          this.form.filePath = e[0].filePath;
          this.form.imageId = e[0].fileId;
        } else if (this.type == "share") {
          this.form.shareFilePath = e[0].filePath;
          this.form.shareImageId = e[0].fileId;
        } else if (this.type == "rule") {
          this.form.ruleFilePath = e[0].filePath;
          this.form.ruleId = e[0].fileId;
        } else if (this.type == "lul") {
          this.form.invImagePath = e[0].filePath;
          this.form.invImageId = e[0].fileId;
        }
      }
      this.isUpload = false;
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isUpload = true;
    },
    /*获取富文本内容*/
    contentChangeFunc(e) {
      this.form.invRule = e;
    },
  },
};
</script>

<style lang="scss" scoped>
.reward-box {
  background-color: rgba(246, 246, 246, 1);
  padding: 16px;
}
</style>
